import { reactive, shallowRef } from "vue"
import BlogSet from "./BlogSet/index.vue"
import ChatSet from "./ChatSet/index.vue"
import CollectionSet from "./ColSet/index.vue"
import FileSet from "./FileSet/index.vue"
import MusicSet from "./MusicSet/index.vue"
import SpaceSet from "./SpaSet/index.vue"
import SystemSet from "./SysSet/idnex.vue"
import UserSet from "./UserSet/index.vue"


interface Menu {
    label: string,
    url: string,
    icon: string,
    key: string
}


// 动态控制页面侧栏菜单宽度
// export const menuWidth = `50px`






export const CollectivityMenu: Menu[] = reactive([
    { label: "11", url: "111", icon: "111", key: "snow-user-set" },
    { label: "22", url: "22", icon: "22", key: "snow-chat-set" },
    { label: "33", url: "33", icon: "33", key: "snow-music-set" },
    { label: "44", url: "44", icon: "44", key: "snow-system-set" },
    { label: "55", url: "55", icon: "55", key: "snow-blog-set" },
    { label: "66", url: "66", icon: "66", key: "snow-space-set" },
    { label: "77", url: "77", icon: "77", key: "snow-collection-set" },
    { label: "88", url: "88", icon: "88", key: "snow-about-file" },
])
// 组件对象映射关系
const componentMap = {
    "snow-user-set": UserSet,
    "snow-chat-set": ChatSet,
    "snow-music-set": MusicSet,
    "snow-system-set": SystemSet,
    "snow-blog-set": BlogSet,
    "snow-space-set": SpaceSet,
    "snow-collection-set": CollectionSet,
    "snow-about-file": FileSet
}
// 动态存储组件
export const component = shallowRef<typeof BlogSet | typeof ChatSet | typeof CollectionSet | typeof FileSet | typeof MusicSet | typeof SpaceSet | typeof SystemSet | typeof UserSet | null>(null)
// 获取动态组件
export const getComponent = (menuIndex: string) => {
    return componentMap[menuIndex as keyof typeof componentMap];
}

